import userEvent from '@testing-library/user-event'
import React,{useEffect,useState} from 'react'
import { Button, Space, Swiper, Toast } from 'antd-mobile'
import styles from './index.css'

export default function Index() {
  const [colors, setColor] = useState([])
  useEffect(()=>{
    setColor(
      ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
    )
  },[])
  useEffect(()=>{
    navigator.geolocation.getCurrentPosition(function (position) {
      box.innerHTML += "经度" + position.coords.longitude;
      box.innerHTML += "纬度" + position.coords.latitude;
      box.innerHTML += "准确度" + position.coords.accuracy;
      box.innerHTML += "海拔" + position.coords.altitude;
      box.innerHTML += "海拔准确度" + position.coords.altitudeAcuracy;
      box.innerHTML += "行进方向" + position.coords.heading;
      box.innerHTML += "地面速度" + position.coords.speed;
      box.innerHTML += "请求的时间" + new Date(position.timestamp);
    }, function (err) {
      alert(err.code);
// code：返回获取位置的状态
//          0  :  不包括其他错误编号中的错误
// ​		     1  :  用户拒绝浏览器获取位置信息
// ​		     2  :  尝试获取用户信息，但失败了
// ​		     3  :   设置了timeout值，获取位置超时了
    }, {
        enableHighAcuracy: false, //位置是否精确获取
        timeout: 5000,            //获取位置允许的最长时间
        maximumAge: 1000          //多久更新获取一次位置
      })
  },[])
  return (
    <div>
      {
        colors.map((color, index) => (
          <Swiper.Item key={index}>
            <div
              className={styles.content}
              style={{ background: color }}
              onClick={() => {
                Toast.show(`你点击了卡片 ${index + 1}`)
              }}
            >
              {index + 1}
            </div>
          </Swiper.Item>
        ))
      }
    </div>
  )
}
